 .left-content {
   width: 100%;
   height: 100%;
   .panel {
     border: none;
     box-sizing: border-box;
     position: relative;
     background-color: transparent;
     overflow: hidden;
     border-radius: 4px;
     &.panel-total {
       height: 16%;
       width: 25vw;
       background-color: rgba(0, 0, 0, 0.5);
       box-sizing: border-box;
       margin-bottom: 15%;
       position: relative;
       display: flex;
       .analyise-left {
         width: 3vw;
         height: 100%;
         position: relative;
         &:after {
           content: " ";
           position: absolute;
           height: 100%;
           right: 0;
           width: 1px;
           background-color: rgba(255, 255, 255, 0.4);
           transform: scaleX(.5);
         }
         .icon {
           height: .5vh;
           width: 40%;
           position: absolute;
           left: 50%;
           transform: translateX(-50%);
           margin-top: 30%;
           background-color: #4ADD8D;
         }
         .title {
           position: absolute;
           color: #fff;
           letter-spacing: 3px;
           text-align: center;
           font-size: 12px;
           left: 50%;
           margin-top: 70%;
           transform: translateX(-50%);
           writing-mode: vertical-lr;
           writing-mode: tb-lr;
         }
       }
       .analyise-right {
         width: calc(100% - 3vw);
         height: 100%;
         display: flex;
         justify-content: space-between;
         color: #fff;
         .analyise-total {
           width: 49%;
           height: 100%;
           box-sizing: border-box;
           text-align: left;
           position: relative;
           padding: .6vw;
           .top-info {
             height: 58%;
             display: flex;
             align-items: center;
             a {
               display: inline-block;
               margin-right: .5vw;
               &.blue {
                 background-color: rgba(12, 141, 206, 1);
               }
               i {
                 color: white;
                 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
                 padding: 6px 5px;
                 margin: 0;
               }
             }
             strong {
               font-family: 'Open Sans', sans-serif;
               font-weight: 600;
               display: inline-block;
               vertical-align: text-bottom;
               span {
                 display: inline;
                 color: #fff;
                 font-size: 1.4vw;
               }
             }
             &:after {
               content: "";
               display: block;
               clear: both;
             }
           }
           .progress {
             height: 20px;
             overflow: hidden;
             background-color: #f5f5f5;
             -webkit-border-radius: 2px;
             -moz-border-radius: 2px;
             border-radius: 2px;
             &.progress-micro {
               height: 2px;
             }
             .bar {
               float: left;
               width: 0;
               height: 100%;
               font-size: 12px;
               color: #ffffff;
               text-align: center;
               background-color: #0e90d2;
               background-image: -moz-linear-gradient(top, #149bdf, #0480be);
               background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
               background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
               background-image: -o-linear-gradient(top, #149bdf, #0480be);
               background-image: linear-gradient(to bottom, #149bdf, #0480be);
               background-repeat: repeat-x;
               filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
               -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
               box-sizing: border-box;
               -webkit-transition: width 0.6s ease;
               -moz-transition: width 0.6s ease;
               -o-transition: width 0.6s ease;
               transition: width 0.6s ease;
             }
           }
           .count-total {
             display: flex;
             height: 40%;
             align-items: center;
             justify-content: center;
             font-size: 1.5vw;
             color: #0C8DCE;
             text-transform: uppercase;
             font-family: 'Open Sans', sans-serif;
             font-weight: 600;
           }
         }
         .analyise-raise {
           width: 49%;
           height: 100%;
           display: flex;
           flex-direction: column;
           text-align: left;
           .boxchart {
             height: 50%;
             width: 100%;
             box-sizing: border-box;
             font-size: .95vw;
             padding: 1vh .3vw;
             .squre {
               background-color: rgba(68, 200, 131, .8);
               margin: 0 .3vw;
               padding: 0 .3vw;
             }
           }
           .number {
             height: 50%;
             width: 100%;
             font-size: 2vw;
             display: flex;
             align-items: center;
             .fa {
               margin-left: .3vw;
             }
             &.color-red {
               color: #FD0E11;
             }
             &.color-green {
               color: rgb(10, 240, 70);
             }
           }
         }
       }
     }
     &.panel-pie {
       height: 30%;
       width: 25vw;
       background-color: rgba(0, 0, 0, 0.5);
       box-sizing: border-box;
       margin-bottom: 15%;
       .panel-pie-header {
         height: 18%;
         width: 100%;
         background-color: rgba(0, 0, 0, 0.7);
         color: #fff;
         position: relative;
         display: flex;
         align-items: center;
         &:after {
           content: " ";
           position: absolute;
           height: 1px;
           bottom: 0;
           width: 100%;
           background-color: rgba(255, 255, 255, 0.4);
           transform: scaleY(.5);
         }
         .icon {
           height: 2.3vh;
           width: .3vw;
           margin-left: 5%;
           background-color: #52FBFE;
         }
         .title {
           margin-left: 5%;
           color: #fff;
           letter-spacing: 3px;
           text-align: center;
           font-size: 12px;
         }
       }
       .panel-pie-footer {
         height: 82%;
         width: 100%;
       }
     }
     &.panel-bar {
       height: 35%;
       box-sizing: border-box;
       width: 25vw;
       background-color: rgba(0, 0, 0, 0.3);
       .panel-bar-header {
         height: 16%;
         width: 100%;
         background-color: rgba(0, 0, 0, 0.7);
         color: #fff;
         position: relative;
         display: flex;
         align-items: center;
         .icon {
           height: 2.3vh;
           width: .3vw;
           margin-left: 5%;
           background-color: #FF6803;
         }
         .title {
           margin-left: 5%;
           color: #fff;
           letter-spacing: 3px;
           text-align: center;
           font-size: 12px; // left: 25%;
           // top: 50%;
           // transform: translate(-50%, -50%);
         }
         &:after {
           content: " ";
           position: absolute;
           height: 1px;
           bottom: 0;
           width: 100%;
           background-color: rgba(255, 255, 255, 0.4);
           transform: scaleY(.5);
         }
       }
       .panel-bar-footer {
         height: 84%;
         width: 100%;
       }
     }
   }
 }

 .right-content {
   height: 100%;
   .panel {
     border: none;
     box-sizing: border-box;
     position: relative;
     background-color: transparent;
     overflow: hidden;
     border-radius: 4px;
     .has-border {
       &:after {
         content: " ";
         position: absolute;
         height: 100%;
         right: 0;
         width: 1px;
         background-color: rgba(255, 255, 255, 0.4);
         transform: scaleX(.5);
       }
     }
     &.panel-jiankong {
       height: 15%;
       width: 31vw;
       box-sizing: border-box;
       background-color: rgba(0, 0, 0, 0.3);
       margin-bottom: 10%;
       display: flex;
       .left-content {
         width: 3vw;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.7);
         position: relative;
         text-align: center;
         .icon {
           height: .5vh;
           width: 40%;
           position: absolute;
           left: 50%;
           transform: translateX(-50%);
           margin-top: 30%;
           background-color: #4ADD8D;
         }
         .title {
           position: absolute;
           color: #fff;
           letter-spacing: 3px;
           text-align: center;
           font-size: 12px;
           left: 50%;
           margin-top: 70%;
           transform: translateX(-50%);
           writing-mode: vertical-lr;
           writing-mode: tb-lr;
         }
       }
       .right-c {
         display: flex;
         justify-content: space-between;
         overflow: hidden;
         width: calc(100% - 3vw);
         div.icon {
           width: 33%;
           height: 100%;
           box-sizing: border-box;
           color: #44C883;
           padding: 1%;
           position: relative;
           &:after {
             content: " ";
             position: absolute;
             height: 80%;
             right: 0;
             top: 50%;
             transform: translateY(-50%) scaleX(.5);
             border-right: 1px dashed rgba(255, 255, 255, 0.4);
           }
           &:last-child {
             &:after {
               border: 0 none;
             }
           }
           .icon-body {
             height: 70%;
             width: 100%;
             span {
               display: block;
               padding: .1vw;
               box-sizing: border-box;
               font-size: .9vw;
               color: #fff;
             }
             div {
               text-align: center; //  padding: .5vw;
               box-sizing: border-box;
               .fa {
                 font-size: 3vw;
               }
             }
           }
           .icon-footer {
             height: 30%;
             width: 100%;
             text-align: center;
             font-size: 1.4vw;
           }
         }
       }
     }
     &.panel-paiming {
       height: 33%;
       width: 31vw;
       box-sizing: border-box;
       background-color: rgba(0, 0, 0, 0.5);
       margin-bottom: 10%;
       display: flex;
       .left-content {
         width: 3vw;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.7);
         position: relative;
         text-align: center;
         .icon {
           height: .5vh;
           width: 40%;
           position: absolute;
           left: 50%;
           transform: translateX(-50%);
           margin-top: 30%;
           background-color: #52FBFE;
         }
         .title {
           position: absolute;
           color: #fff;
           letter-spacing: 3px;
           text-align: center;
           font-size: 12px;
           left: 50%;
           margin-top: 70%;
           transform: translateX(-50%);
           writing-mode: vertical-lr;
           writing-mode: tb-lr;
         }
       }
       .right-c {
         height: 100%;
         width: calc(100% - 3vw);
       }
     }
     &.panel-yichang {
       height: 35%;
       width: 31vw;
       box-sizing: border-box;
       background-color: rgba(0, 0, 0, 0.5);
       display: flex;
       .left-content {
         width: 3vw;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.7);
         position: relative;
         text-align: center;
         .icon {
           height: .5vh;
           width: 40%;
           position: absolute;
           left: 50%;
           transform: translateX(-50%);
           margin-top: 30%;
           background-color: #1C5DEB;
         }
         .title {
           position: absolute;
           color: #fff;
           letter-spacing: 3px;
           text-align: center;
           font-size: 12px;
           left: 50%;
           margin-top: 70%;
           transform: translateX(-50%);
           writing-mode: vertical-lr;
           writing-mode: tb-lr;
         }
       }
       .right-content {
         height: 100%;
         width: calc(100% - 3vw);
       }
     }
   }
 }

 .marquee-box {
   display: block;
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   font-size: .8vw;
   .marquee-list {
     display: block;
     list-style: none;
     margin: 0;
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     padding: 0.5vh 0vw;
     li:nth-child(1) {
       color: #3FD58B;
     }
     li:nth-child(2) {
       color: #50F8FB;
     }
     li:nth-child(3) {
       color: #BEB940;
     }
     li {
       padding: 0;
       margin: 0;
       width: 100%;
       height: 15%;
       list-style: none;
       display: block;
       position: relative;
       padding: .2vw;
       box-sizing: border-box;
       color: #fff;
       overflow: hidden;
       z-index: 2;
       &:after {
         content: "";
         position: absolute;
         height: 1px;
         background-color: rgba(255, 255, 255, 0.4);
         bottom: 0;
         left: 0;
         right: 0;
         width: 100%;
         transform: scaleY(.5);
       }
       &:last-child {
         &:after {
           display: none;
         }
       }
       &:first-child {
         // border-top: .1vw dashed rgba(255, 255, 255, 0.9);
       }
       div.marquee-box-item {
         width: 100%;
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         transform: translateZ(0px);
         transition: all 600ms ease, opacity 300ms ease;
         transform-origin: 50% 50%;
         background: rgba(0, 0, 0, 0.4);
         position: relative;
         div[class^="marquee-box-"] {
           display: flex;
           align-items: center;
           justify-content: center;
           border-right: 1px solid rgba(255, 255, 255, 0.4);
           &:last-child {
             border: 0 none;
           }
         }
         .marquee-box-first {
           width: 20%;
           height: 100%;
         }
         .marquee-box-second {
           width: 40%;
           height: 100%;
           text-overflow: ellipsis;
           white-space: nowrap;
           overflow: hidden;
         }
         .marquee-box-third {
           width: 40%;
           height: 100%;
         } // &:before {
         //   z-index: -1;
         //   height: 100%;
         //   position: absolute;
         //   content: '';
         //   top: 0;
         //   left: 5%;
         //   right: 5%;
         //   transform: skewX(-45deg);
         // }
         &.future {
           opacity: 0;
           transform: rotateX(-180deg);
         }
       }
     }
   }
 }

 .tablebox {
   height: 100%;
   width: 100%;
   overflow: hidden;
   font-size: .8vw;
   .table-head {
     height: 15%;
     width: 100%;
     display: flex;
     color: #fff;
     font-size: .8vw;
     .single-item {
       width: 25%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(0, 0, 0, 0.3);
     }
   }
   .table-body {
     height: 85%;
     width: 100%;
     .seamless-warpper {
       height: 100%;
       overflow: hidden;
     }
     .single-item {
       display: flex;
       height: 45px;
       width: 100%;
       overflow: hidden;
       &.color-red {
         color: #EA0505;
       }
       &.color-green {
         color: #44C883;
       }
       .item {
         display: flex;
         justify-content: center;
         align-items: center;
         text-align: center;
         width: 25%;
         box-sizing: border-box;
         border-bottom: .05vw solid rgba(255, 255, 255, 0.4);
         padding: .5vw;
       }
     }
   }
   table thead tr th,
   table tbody tr td {
     box-sizing: border-box;
     padding: 1vw 0;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
   }
   table tbody tr td {
     font-size: .8vw;
     &:first-child {
       border-left: 0 none;
     }
   }
   table {
     tbody {
       tr {
         td {
           perspective: 200px;
           transform-style: preserve-3d;
           transform: translate3d(0, 0, -200px);
           transition: all 1000ms ease, opacity 200ms ease;
           transform-origin: 50% 50%;
           &.three-d {
             opacity: 0;
             transform: rotate3d(80, 70, 10, -180deg);
           }
         }
       }
     }
   }
 }
